@use "variables" as *;
@use "sass:color";

// Padding for the popups.
.bp5-popover-content {
  z-index: 999;
  padding: 1rem;
  color: var(--text-color) !important;
  background: var(--main-bg) !important;
  box-shadow: var(--box-shadow) !important;
}

.bp5-popover {
  box-shadow: var(--box-shadow);
  font-size: 1.3rem;
  border-radius: 0.5rem;
  overflow: hidden;
  .bp5-popover-arrow {
    display: none !important;
  }
}

// Arrow is slightly off by default in the popup menu.
.bp5-tether-element-attached-left.bp5-tether-target-attached-right>.bp5-popover>.bp5-popover-arrow {
  left: -1rem;
}

.bp5-overlay-content.bp5-tether-abutted.bp5-tether-abutted-top.bp5-tether-element.bp5-tether-element-attached-left.bp5-tether-element-attached-top.bp5-tether-enabled.bp5-tether-target-attached-bottom.bp5-tether-target-attached-left.bp5-transition-container {
  top: 2rem !important;
}

.bp5-portal {
  z-index: 99;
}

.bp5-menu {
  max-height: 20rem !important;
  overflow-y: scroll;
}

.bp5-input {
  box-shadow: none;
  border-radius: 0;
}

.bp5-input-group {
  border-bottom: 1.5px solid var(--border-color);
  .bp5-icon {
    top: 0.6rem;
  }
}

.bp5-popover.help {
  .bp5-popover-content {
    width: 32rem;
  }
}

.bp5-slider {
  margin: 0 2.5rem 0 1.5rem;
  width: initial;
}

.bp5-slider-progress {
  background: var(--secondary-bg);
}

.bp5-control {
  margin: 0;
}

.bp5-button:not(.bp5-minimal) {
  font-weight: normal;
  text-transform: none;
  border-radius: 3px;
  font-size: 1.2rem !important;
  color: $black !important;
  height: 27px !important;
  width: 100% !important;
  border: 0 !important;
  box-shadow: none !important;
  background: $translucent9_white !important;
  &:hover {
    background: $translucent9_white !important;
  }
  :first-child {
    display: inline-block;
    white-space: nowrap;
    width: 73%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 1.5rem;
  }
}

.bp5-icon-standard.bp5-align-right {
  float: right !important;
  margin-top: 0.6rem !important;
  margin-left: 0 !important;
  font-size: 1.6rem !important;
}

.nav-right .bp5-popover-wrapper {
  transition: all 0.2s ease;
  text-transform: uppercase;
  color: $gray;
  font-size: 1.2rem;
  letter-spacing: 1.2px;
  float: right;
  font-weight: normal;
  margin-top: 2.2rem;
  cursor: pointer;
  &:hover {
    font-weight: bold;
    color: $white;
  }
}

.bp5-collapse {
  scrollbar-width: none;
}

.bp5-collapse::-webkit-scrollbar,
.bp5-collapse-body::-webkit-scrollbar {
  display: none !important;
  width: 0px !important;
  background-color: transparent !important;
}

*[class*=bp5-] {
  &:focus {
    outline: none;
  }
}
